Please login to access all of the features of the Community Site.

Avatar

Display a person's avatar using the configured settings. Rock's avatar feature provides the ability to create unique avatar images for each person record within the system.

Inherits from Microsoft.Maui.Controls.ContentView

Visit the link below to learn more about this Rock feature:

Avatar Styling

This control constructs an avatar image source based on the provided parameters or displays the current person's avatar.

Important

Starting with Rock v20.1, GetAvatar.ashx only shows a person's photo on a URL the server signed. A PersonGuid on its own can't unlock a photo, so <Rock:Avatar PersonGuid="..." /> shows initials for anyone other than the current person. Pass the person's photo URL in Source as well, as shown in the examples below. Signed URLs expire after about seven days, so a photo falls back to initials if page content is cached longer than that.

Properties

Property	Type	Description
Source	string	The photo URL the server built for the person, such as their `PhotoUrl`. When it points at `GetAvatar.ashx`, the avatar styling properties below are added to it. M19.6
PersonGuid	Guid	The person to display the avatar for. Used to refresh the avatar when that person's photo changes.
Rounded	bool	Whether or not the avatar should be rounded.
ShowStroke	bool	Whether or not a default stroke shape should be applied to the avatar.
AvatarBackgroundColor	Color	The background color of the avatar. This is passed along to the GetAvatar request.
AvatarForegroundColor	Color	The foreground color of the avatar. This is passed along to the GetAvatar request.
AvatarAgeClassification	AgeClassification	The age classification of the avatar.
AvatarGender	Gender	The gender of the avatar.
AvatarBold	bool	Whether or not the avatar should be bolded.
AvatarStyle	string	The style of the avatar. Typically initials or icon.
AvatarText	string	The text to use for the avatar.

Automatic Updates

M20.0

An Avatar refreshes itself when a person's photo is updated through the UpdatePersonProfilePhoto command, with no extra markup. Which form you use determines whether that happens:

Form	Refreshes Automatically?
`<Rock:Avatar Source="..." PersonGuid="..." />`	Yes, when that person's photo changes M19.6
`<Rock:Avatar PersonGuid="..." />`	Yes, when that person's photo changes. On Rock v20.1 and later this shows initials unless it is the current person.
`<Rock:Avatar />`	Yes, for the current person
`<Rock:Avatar Source="..." />`	No. Displays whatever URL you supplied, and only changes when that value does
Styled avatars with no `PersonGuid` (initials, icon, custom text)	No, they render no photo

Photo changes made on the website rather than in the app are picked up the next time the app launches.

Important

When using PersonGuid, the control may append a cache parameter to the generated GetAvatar.ashx URL so the updated photo is fetched instead of a cached copy. Do not strip or parse this parameter in custom Lava.

Examples

Which form to use depends on whose avatar you are showing.

For anyone other than the current person, pass both Source and PersonGuid. Source supplies the photo URL the server built, and PersonGuid lets the avatar refresh when that person's photo changes. This works on every Rock version. PhotoUrl is a site-relative path, so prefix it with the public application root, and use Escape since the URL contains &.

<Rock:Avatar Source="{{ 'Global' | Attribute:'PublicApplicationRoot' }}{{ member.Person.PhotoUrl | Escape }}"
   PersonGuid="{{ member.Person.Guid }}" />

For the current person, PersonGuid on its own is enough. The app already has their photo URL from the server, so the avatar shows and refreshes their photo without a Source.

<Rock:Avatar PersonGuid="{{ CurrentPerson.Guid }}" />

<Rock:Avatar AvatarBackgroundColor="{Rock:PaletteColor App-Primary-Soft}" 
   AvatarForegroundColor="{Rock:PaletteColor App-Primary-Strong}"
   AvatarText="Custom Avatar"
   Rounded="False" />

If no properties are set, the component will display the current person's avatar:

<Rock:Avatar />

Application Info Bible Audio

Improve